<template>  
  <el-upload  
    ref="upload"  
    class="upload-demo"  
    action="http://localhost:9090/api/admin/upload"  
    :on-success="handleSuccess"  
    :before-upload="beforeUpload"  
    :file-list="fileList"  
    :auto-upload="false"  
    :on-change="handleChange"  
  >  
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>  
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>  
    <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件，且不超过500kb</div>  
  </el-upload>  
</template>  
  
<script>  
export default {  
  // ... 其他代码保持不变  
  data() {  
    return {  
      fileList: []  
    };  
  },  
  methods: {  
    handleSuccess(response, file, fileList) {  
      console.log('文件上传成功:', response);  
    },  
    beforeUpload(file) {  
      // 限制格式为excel
      // 如果不想限制可以将这行代码去掉，以及后面的一些关于excel的判断
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';  
      // 限制文件大小
      const isLt2M = file.size / 1024 / 1024 < 0.5;  

      if (!isExcel) {  
        this.$message.error('上传文件只能是 xls/xlsx 格式!');  
      }  

      if (!isLt2M) {  
        this.$message.error('上传文件大小不能超过 500KB!');  
      }  
      return isExcel && isLt2M;  
    },  
    submitUpload() {  
      // 这边的$refs.upload要与上面第三行的ref一致
      this.$refs.upload.submit();  
    },  
    handleRemove(file, fileList) {  
      console.log('移除文件', file, fileList);  
    },  
    handleChange(file, fileList) {  
      this.fileList = fileList;  
    }  
  }    
};  
</script>